import './index.scss'
import {Flex, Image, Button} from "antd";
import {PlusOutlined} from '@ant-design/icons';
import {observer} from "mobx-react-lite";
import CountBtn from "@/components/CountBtn/index.jsx";
import {useEffect, useRef, useState} from "react";
import {autorun} from "mobx";
import {useStore} from "@/store/index.jsx";

const Item = () => {
    const {listStore} = useStore()
    return (
        <div>
          {/*有了 数据之后才渲染  */}
            {listStore.mainData.length>0&&listStore.mainData[listStore.menuIndex].foods.map(v => <div key={v.id} className={'item-content'}>
                <Flex vertical={false} style={{width: '100%'}}>
                    <Image
                        fallback=""
                        width={100}
                        height={100}
                        src={v.picture}
                    />
                    <div className={'right'}>
                        <div className={'name'}>{v.name}</div>
                        <div className={'tag tag-grey'}>{v.unit}</div>
                        {v.food_tag_list.map(v2=><div key={v} className={'tag tag-orange'}>{v2}</div>)}
                        <div className={'sales'}>月销量{v.month_saled} {v.like_ratio_desc}</div>
                        <div className={'price-row'}>
                            <div className={'price'}><span style={{fontSize:'12px'}}>¥ </span> <span>{v.price}</span></div>
                            <CountBtn row={v}></CountBtn>
                        </div>
                    </div>
                </Flex>
            </div>)}
            {   <div className={'prompt'}>到底了~</div>}
        </div>
    )
}
export default observer(Item)